<template>
    <div class="j-tip">
        <loading :show="isLoading" text='加载中...' position="absolute" class="loading"></loading>
        <toast :value="isTip" type="text" @on-hide="onTipHide" :width="'50%'" position="middle">
            <slot>{{tipText}}</slot>
        </toast>
    </div>
</template>

<script>
    import {Loading, Toast} from 'vux'
    import { mapState } from 'vuex'

    export default {
        components: {
            Loading,
            Toast
        },
        data(){
            return {
            }
        },
        computed: mapState({
            isTip: state => state.isTip,
            tipText: state => state.tipText,
            isLoading: state => state.isLoading
        }),

        methods: {
            onTipHide() {
                this.$store.dispatch('showToast',false)
            }
        }
    }
</script>
<style>
    .j-tip{
        position: absolute;
        z-index:9999;
        left:50%;
    }
    .loading .weui-toast{
        width:7.6em;
        height:7.6em;
    }
    .loading .weui-icon_toast.weui-loading{
        margin:14px 0 0 0;
    }
</style>
